<!-- @include ./inc/header.html -->

<header class="g-header">
  <div class="g-title">
    <h3>选材工艺</h3>
    <span>material & <br>processes</span>
  </div>
</header>

<main class="main">
  <section class="wood">
    <header class="wood-hd">
      <div class="text">木材介绍 <small>Wood Introduction</small></div>
    </header>
    <div class="wood-wrap">
      <div class="swiper-container" id="wood-list">
        <div class="swiper-wrapper">
          {{each wood}}
          <div class="swiper-slide wood-item" data-name="{{$value.name}}" data-img="{{$value.img}}" data-text="{{$value.text}}" data-width="20">
            <img src="/@@/images/m/material/{{$value.img}}.png" alt="">
            <p>{{$value.name}}</p>
          </div>
          {{/each}}
        </div>
        <div class="swiper-scrollbar wood-scrollbar"></div>
      </div>
    </div>
  </section>

  <section class="wood">
    <header class="wood-hd">
      <div class="text">榫卯介绍 <small>Wood Joints</small></div>
    </header>
    <div class="wood-wrap joint-wrap">
      <div class="swiper-container" id="joint-list">
        <div class="swiper-wrapper">
          {{each joint}}
          <div class="swiper-slide wood-item" data-name="{{$value.name}}" data-img="{{$value.img}}" data-text="{{$value.text}}" data-width="45">
            <img src="/@@/images/m/material/{{$value.img}}.png" alt="">
            <p>{{$value.name}}</p>
          </div>
          {{/each}}
        </div>
        <div class="swiper-scrollbar joint-scrollbar"></div>
      </div>
    </div>
  </section>
  <div>
    <img class="wimg" src="/@@/images/m/material_bg.jpg" alt="">
  </div>
</main>

<div class="modal-mask" id="modal-mask"></div>
<div class="wood-modal" id="wood-modal">
  <header class="wood-modal-hd">
    <i class="iconfont icon-close wood-modal-close" id="wood-modal-close"></i>
  </header>
  <div class="wood-modal-bd" id="wood-modal-bd">
    <div class="wood-modal-pic" style="width: 20%">
      <img class="wimg" src="/@@/images/m/material/mu1.png" alt="">
    </div>
    <div class="wood-modal-con">
      <span class="name">[ 黑酸枝 ]</span>
      <div class="summary">酸枝木是天然的除臭剂，会散发出天然的酸香气。黑酸枝属国标红木，是高等红木材质中的宠儿。</div>
    </div>
  </div>
</div>

<!-- @include ./inc/footer.html -->
<link href="//cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script>
$(function() {
  var swiper = new Swiper('#wood-list', {
    slidesPerView: 'auto',
    freeMode: true,
    scrollbar: {
      el: '.wood-scrollbar',
    },
    mousewheel: true,
  });

  var swiper = new Swiper('#joint-list', {
    slidesPerView: 'auto',
    freeMode: true,
    scrollbar: {
      el: '.joint-scrollbar',
    },
    mousewheel: true,
  });

  $('.wood-item').on('click', function() {
    var $this = $(this)
    var data = $this.data()
    var content = '<div class="wood-modal-pic" style="width: ' + data.width +'%">'
        +'<img class="wimg" src="/@@/images/m/material/' + data.img +'.png" alt="">'
      +'</div>'
      +'<div class="wood-modal-con">'
        +'<span class="name">[ ' + data.name +' ]</span>'
        +'<div class="summary">'+ data.text +'</div>'
      +'</div>'
    $('#wood-modal-bd').html(content)
    $('#wood-modal').slideDown(300)
    $('#modal-mask').show()
  })
  
  $('#wood-modal-close').on('click', function() {
    $('#wood-modal').slideUp(300, function() {
      $('#wood-modal-bd').html('')
      $('#modal-mask').hide()
    })
  })
})
</script>
<!-- @include ./inc/end.html -->